<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script src="../../../../../dist/vue1.0/vue.js"></script>
	<script type="text/javascript" src="../../js/vue-router/dist/vue-router.js">
		
	</script>
	<body>
		<div id="box">
			<ul>
				<li><a v-link="{path:'/home'}">主页</a></li>
				<li><a v-link="{path:'/news'}">新闻</a></li>
				  
				    
			</ul>
			<div >
				<router-view></router-view>
			</div>
		</div>
		<template id="news">
			<h3>我是新闻</h3>
			<div>
				<a v-link="{path:'/news/detail/001'}">新闻001</a>
				<a v-link="{path:'/news/detail/002'}">新闻002</a>
			</div>
			<div>
				<router-view></router-view>
			</div>
		</template>
		<template id="home">
			<h3>我是主页</h3>
			<div class="" >
				<a v-link="{path:'/home/login'}">登陆</a>
				<a v-link="{path:'/home/reg'}">注册</a>
				
			</div>
			<div>
				<router-view></router-view>
			</div>
		</template>
		<template id="detail">
			
			{{$route.query}}
			<br />
			
			{{$route.query | json}}
		</template>
	</body>
	<script>
//		 1.创建根组件
		var app=Vue.extend()
		//
//		2,创建组件，这里是使用Vue.extend()方法创建组件，可以使用其他方式创建
//		
//		组件home
		var Home=Vue.extend({
			template:'#home'
		})
		
		
//		组件news
		var News=Vue.extend({
			template:'#news',
			
			
		})
		
		var Detail=Vue.extend({
			template:'#detail',
			
		})
		
		// 3.准备路由
		  var router=new VueRouter();
		  
//		  4, 关联
          router.map({
          	'home':{
          		component:Home,
          		subRoutes:{   //设置路由嵌套
          			'login':{
          				component:{
          					template:'<strong>我是登录信息</strong>'
          				}
          			},
          			'reg':{
          				component:{
          					template:'<strong>我是注册信息</strong>'
          				}
          			}
          		}
          	},
          	'news':{
          		component:News,
          		subRoutes:{
          			'/detail/:id':{
          				component:Detail
          			}
          		}
          	}
          })
           
//        5,启动路由
          router.start(app,'#box')
           
          



	</script>
</html>
         